<template>

    <!-- <div class="card"> -->
    <div>
        <el-row :gutter="20">
            <el-col :span="2">
                <el-avatar :src="imgUrl" size="large" />
            </el-col>
            <el-rol :span="6">
                <el-row>
                    <el-col>
                        <div class="demo-rate-block">
                            <span class="demonstration">{{ publicTime }}</span>
                            <el-rate v-model="star" disabled/>
                        </div>
                    </el-col>

                </el-row>
            </el-rol>
            <el-col :span="16">
                <div style="display: flex; width: 100%; text-align: left;">
                    <div>{{ text }}</div>
                </div>

                <div style="display: flex; flex-direction: row-reverse; width: 40rem;">
                    <el-link class="commentButton">回复</el-link>
                    <el-link class="commentButton">点赞</el-link>
                </div>
            </el-col>
        </el-row>
        <el-divider />
    </div>

</template>
<script setup lang="ts">
import { ref, defineProps } from 'vue';
const props = defineProps({
    publicTime: String,
    imgUrl: String,
    text: String,
    star: Number
})


const rate = ref(null)

</script>
<style scoped>

.commentButton {
    padding: 3%;
}
.card {
    display: flex;

}

.demo-rate-block {
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    display: inline-block;
    width: 49%;
    box-sizing: border-box;
}

.demo-rate-block:last-child {
    border-right: none;
}

.demo-rate-block .demonstration {
    color: var(--el-text-color-secondary);
    font-size: 14px;
}
</style>